<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="chart-name" content="三角柱状图">
  <title>Triangle Bar Chart</title>
</head>

<body>
  <div class="chart-wrapper">
    <canvas id="mountNode"></canvas>
  </div>
  <script src="../build/f2-all.js"></script>
  <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
  <script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
  <script>
  const Shape = F2.Shape;
  Shape.registerShape('interval', 'triangle', {
    getPoints(cfg) {
      const x = cfg.x;
      const y = cfg.y;
      const y0 = cfg.y0;
      const width = cfg.size;
      return [
        { x: x - width / 2, y: y0 },
        { x: x, y: y },
        { x: x + width / 2, y: y0 }
      ];
    },
    draw(cfg, group) {
      const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
      const leftPoints = [
        { x: points[0].x, y: points[0].y },
        { x: points[1].x, y: points[1].y },
        { x: points[1].x, y: points[0].y }
      ];
      const rightPoints = [
        { x: points[1].x, y: points[1].y },
        { x: points[2].x, y: points[2].y },
        { x: points[1].x, y: points[0].y }
      ];
      const left = group.addShape('polygon', {
        attrs: {
          points: leftPoints,
          fill: cfg.color
        }
      });
      const hsl = d3.hsl(cfg.color); // 右侧颜色降低亮度
      hsl.l -= 0.15;
      const right = group.addShape('polygon', {
        attrs: {
          points: rightPoints,
          fill: hsl
        }
      });
      return [ left, right ]; // 将自定义Shape返回
    }
  });

  const data = [
    { name: '珠穆朗玛峰', height: 8844.43 },
    { name: '乔戈里峰', height: 8611 },
    { name: '贡嘎雪山', height: 7556 },
    { name: '布喀达坂峰', height: 6860 },
    { name: '梅里雪山', height: 6710 }
  ];

  const chart = new F2.Chart({
    id: 'mountNode',
    width: window.innerWidth,
    height: window.innerWidth > window.innerHeight ? (window.innerHeight - 54) : window.innerWidth * 0.707,
    pixelRatio: window.devicePixelRatio,
    padding: [ 'auto', 40 ]
  });

  chart.source(data);
  chart.axis('height', false);
  chart.axis('name', { line: null });
  chart.legend(false);
  chart.interval().position('name*height').color('name').shape('triangle');

  data.map(obj => {
    chart.guide().text({
      position: [ obj.name, obj.height ],
      content: obj.height + '米',
      style: {
        textAlign: 'center',
        textBaseline: 'bottom'
      },
      offsetY: -10
    });
  });
  chart.render();
  </script>
</body>

</html>
